<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <div>
        <div class="font-weight--lg font-size--lg">分享列表</div>
        <el-form-item class="zsg">
          <el-button type="success" @click="goAdd()">添加商品</el-button>
          <el-button type="primary" @click="editGoodsAll()">批量编辑</el-button>
          <el-button type="danger" @click="removeShareGoodsBatch">批量删除</el-button>  
       </el-form-item>
      </div>
      <div style="margin-top:20px">
       <el-form-item label="商品名称：">
              <el-input size="small" placeholder="请输入商品名称" v-model="queryParams.search"></el-input>
       </el-form-item>
       <el-form-item label="商品分类：">
        <el-cascader :options="options" placeholder="请选择商品分类" :show-all-levels="false" v-model="categoryId"
                     :props="{ value: 'id',label:'title',children:'goodsCategoryModelList' }"></el-cascader>
      </el-form-item>

      <el-form-item label="奖励比例：">
        <el-select
          v-model="queryParams.refundType"
          placeholder="请选择奖励比例"
          clearable
          size="small"
        >
          <el-option
            v-for="item in statusData"
            :key="item.index"
            :label="item.name"
            :value="item.index"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="分享状态：">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择分享状态"
          clearable
          size="small"
        >
          <el-option
            v-for="item in statusOptions"
            :key="item.index"
            :label="item.name"
            :value="item.index"
          />
        </el-select>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="getShareGoodsList">查询</el-button>
      </el-form-item>
      </div>

    </el-form>
    <el-table
      :data="tableData"
      stripe
      @selection-change="handleSelectionChange"
      border
      :header-cell-style="tableHeaderStyle"
      style="width: 100%">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        label="序号"
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        width="120"
        label="商品图片">
        <template slot-scope="scope">
          <div class="goodsBox">
            <img :src="baseImgUrl+'/'+scope.row.surfaceImg" alt="">
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="title"
        label="商品名称">
      </el-table-column>
       <el-table-column
        prop="title"
        label="商品编码">
      </el-table-column>
      <el-table-column
        prop="categoryTitle"
        label="商品分类">
      </el-table-column>
      <el-table-column
        label="成本价（元）">
        <template slot-scope="scope">
          <span>{{scope.row.minPrice}}~{{scope.row.maxPrice}}</span>
        </template>
      </el-table-column>
       <el-table-column
        label="售价（元）">
        <template slot-scope="scope">
          <span>{{scope.row.minPrice}}~{{scope.row.maxPrice}}</span>
        </template>
      </el-table-column>
       <el-table-column
        label="商家佣金比率">
        <template slot-scope="scope">
          <p v-for="(item,index) in scope.row.levelList" :key="index">
            {{item.levelName}}:{{item.shareCustomerRatio}}%({{scope.row.minPrice*item.shareCustomerRatio/100}}~{{scope.row.maxPrice*item.shareCustomerRatio/100}})</p>
        </template>
      </el-table-column>
      <el-table-column
        label="分享客佣金比率">
        <template slot-scope="scope">
          <p v-for="(item,index) in scope.row.levelList" :key="index">
            {{item.levelName}}:{{item.shareCustomerRatio}}%({{scope.row.minPrice*item.shareCustomerRatio/100}}~{{scope.row.maxPrice*item.shareCustomerRatio/100}})</p>
        </template>
      </el-table-column>
      <el-table-column
        label="邀请人佣金比率">
        <template slot-scope="scope">
          <p v-for="(item,index) in scope.row.levelList" :key="index">
            {{item.levelName}}:{{item.inviterRatio}}%({{scope.row.minPrice*item.inviterRatio/100}}~{{scope.row.maxPrice*item.inviterRatio/100}})</p>
        </template>
      </el-table-column>
      <el-table-column
        width="120"
        label="是否上架">
        <template slot-scope="scope">
          <el-switch
            @change="updateStatus(scope.row,scope.$index)"
            :value="scope.row.status == 1"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="200">
        <template slot-scope="scope">
           <el-button
            type="primary"
            @click="editGoods(scope.row)"
            size="small">
            编辑
          </el-button>
          <el-button
            type="danger"
            @click="removeShareGoods(scope.row)"
            size="small">
            拒绝
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <add-dialog
      :isShow="isShow"
      :dialogFormVisible="dialogFormVisible"
      :addList="addList"
      :levelList="levelList"
      @closeDialog="closeDialog"
      @saveShareGood="saveShareGood"
      @saveShareGoodsBatch="saveShareGoodsBatch"/>
    <div class="paginationBox">
      <el-pagination
        :page-sizes="[10, 50, 100, 200]"
        :page-size.sync="queryParams.pageSize"
        :current-page.sync="queryParams.pageNum"
        @size-change="getShareGoodsList"
        @current-change="getShareGoodsList"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {
    getShareGoodsList,
    getGoodsCategoryList,
    saveShareGood,
    saveShareGoodsBatch,
    getShareSettings,
    removeShareGoods,
    removeShareGoodsBatch,
    updateStatus,
  } from '@/api/setSharing'
  import addDialog from './components/add/dialog'
  import Setting from '@/settings';
  export default {
    name: 'fsjjc',
    components: {
      addDialog
    },
    data() {
      return {
        statusOptions: [
          { name: '未生效', index: 0 },
          { name: '生效', index: 1 }
        ],
        queryParams: { //分享列表参数
          pageNum: 1,
          pageSize: 10,
        },
        options: [],
        categoryId: [],
        tableData: [],
        total: 0,
        statusData: [
          { name: '全部奖励比率', index: '' },
          { name: '默认奖励比率', index: 0 },
          { name: '自定义奖励比率', index: 1 }
        ],
        isShow:false,
        baseImgUrl: process.env.VUE_APP_FILE_URL,
        dialogFormVisible: false,
        addList: [],
        levelList: [],
        multipleSelection: [],
        tableHeaderStyle: Setting.tableHeaderStyle,
      }
    },
    watch: {
      categoryId(val) {
        if (val.length != 0) {
          this.queryParams.categoryId = val[val.length - 1]
          console.log(this.queryParams.categoryId)
        }
      }
    },
    mounted() {
      this.getGoodsCategoryList()
      this.getShareGoodsList()
      this.getShareSettings()
    },
    methods: {
      // resetQuery() {
      //   this.queryParams = {
      //     pageNum: 1,
      //     pageSize: 10
      //   }
      //   this.categoryId = []
      //   this.getGoodsList()
      // },
      getShareSettings() {
        getShareSettings().then(res => {
          // console.log(res)
          if (res.code == 200) {
            res.data.levelList.forEach(item => {
              delete item.id
            })
            this.levelList = res.data.levelList
          }
        })
      },
      getGoodsCategoryList() {
        getGoodsCategoryList().then(res => {
          if (res.code == 200) {
            this.options = res.data
          }
        })

      },
      getShareGoodsList() {//分享列表
        getShareGoodsList(this.queryParams).then(res => {
          // console.log(res)
          if (res.code == 200) {
            this.tableData = res.data.list
            this.total = res.data.total
          }
        })
      },
      goAdd() {
        this.$router.push('/sharingList/addSharing')
      },
      handleSelectionChange(val) {
        // console.log(val)
        this.multipleSelection = val
      },
      editGoodsAll() {
          if (this.multipleSelection.length == 0) {
          this.$message('请选择商品')
          return false
        }
        this.dialogFormVisible = true
        this.addList = this.multipleSelection
        this.isShow = false
      },
      editGoods(row) {
        this.dialogFormVisible = true
        this.addList = [row]
        this.isShow = true
      },
      closeDialog() {
        this.dialogFormVisible = false
      },
      saveShareGood(param) {
        // console.log(param)
        param.update_id = JSON.parse(this.$store.getters.userInfo).id ? JSON.parse(this.$store.getters.userInfo).id : '1'
        param.goodsId = this.addList[0].goodsId
        param.id = this.addList[0].id

        saveShareGood(param).then(res => {
          if (res.code == 200) {
            this.$message({
              message: '商品修改成功',
              type: 'success'
            })
            this.dialogFormVisible = false
            this.getShareGoodsList()
          } else {
            this.$message.error(res.msg)

          }
        })
      },
      saveShareGoodsBatch(param) {
        param.update_id = JSON.parse(this.$store.getters.userInfo).id ? JSON.parse(this.$store.getters.userInfo).id : '1'
        param.shareGoodsList = []
        this.addList.forEach(item => {
          param.shareGoodsList.push({
            'id': item.id
          })
        })
        saveShareGoodsBatch(param).then(res => {
          if (res.code == 200) {
            this.$message({
              message: '商品修改成功',
              type: 'success'
            })
            this.dialogFormVisible = false
            this.getShareGoodsList()
          } else {
            this.$message.error(res.msg)

          }
        })
      },
      removeShareGoods(row) {
        this.$confirm(<p>是否确认呢要移除所选中的商品 移除后此商品不在分享专区显示</p>, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          center: true,
          showClose:false,
        }).then(() => {
          removeShareGoods({ id: row.id }).then(res => {
            if (res.code == 200) {
              this.getShareGoodsList()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            } else {
              this.$message(res.msg)
            }
          })
        }).catch(() => {

        })

      },
      removeShareGoodsBatch() {
        if (this.multipleSelection.length == 0) {
          this.$message('请选择商品')
          return false
        }
        let shareGoodsList = []
        this.multipleSelection.forEach(item => {
          shareGoodsList.push({
            'id': item.id
          })
        })
        this.$confirm('此操作将删除该分享商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          removeShareGoodsBatch({ 'shareGoodsList': shareGoodsList }).then(res => {
            if (res.code == 200) {
              this.getShareGoodsList()
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            } else {
              this.$message(res.msg)
            }
          })
        }).catch(() => {

        })

      },
      updateStatus(row) {
        let status = row.status == 0?1:0
        updateStatus({id:row.id,status:status}).then(res => {
          if (res.code == 200) {
            row.status =status
            this.$set(this.tableData,index,row)
            this.$message({
              type: 'success',
              message: '修改成功!'
            })
          } else {
            this.$message(res.msg)
          }
        })
      },

    }
  }
</script>

<style lang="scss" scoped>
.app-container {
    margin: 15px 25px!important;
    height: 100vh;
    margin-top: 15px;
    overflow-y: auto;
    border-radius: 6px;
    background: #fff;
    -webkit-box-shadow: 0 0 4px 0 rgba(200, 200, 200, 0.5);
    box-shadow: 0 0 4px 0 rgba(200, 200, 200, 0.5);
}
::v-deep .el-form-item__label{
  padding:0!important;
}
::v-deep .el-cascader--medium{
  width: 8vw !important;
}
::v-deep .el-input--small .el-input__inner{
  width: 8vw !important;
}
::v-deep .el-form--inline .el-form-item{
  margin-right: 20px;
}
::v-deep .el-table th.is-leaf, .el-table td{
  text-align: center;
}
::v-deep .el-input--small .el-input__inner {
    height: 36px !important;
    line-height: 36px !important;
}
::v-deep .el-input--small .el-input__icon {
    line-height: 36px!important;
}
.zsg{
  float: right;
}
::v-deep .el-table .cell{
  text-align: center!important;
  text-overflow: -o-ellipsis-lastline!important;
  overflow: hidden!important;
  text-overflow: ellipsis!important;
  display: -webkit-box!important;
  -webkit-line-clamp: 2!important;
  line-clamp: 2!important;
  -webkit-box-orient: vertical!important;
}
::v-deep .el-table--border td{
    border-right: none!important;
}
::v-deep .el-table--border th{
    border-right: none!important;
}
::v-deep .el-table--border{
  border: none;
}
.el-table--striped .el-table__body tr.el-table__row--striped td{
  background:none;
}
.font-weight--lg {
    font-weight: bolder;
    display: inline-block;
}
.font-size--lg {
    font-size: 18px;
}
.el-message-box__message p{
    margin: 0!important;
    line-height: 32px!important;
    padding: 0px 60px 25px 80px !important;
    font-size: 16px!important;
    font-weight: 600!important;
    color: #333!important;
}
.goodsBox{
  img{width: 100%;}
}
</style>
